import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '计数器',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: MyHomePage(key: const Key('homePage'), title: '主页'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({required Key key, required this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  bool _isCounterEnabled = true;
  double _incrementValue = 1.0;
  String _displayFormat = '十进制';

  void _incrementCounter() {
    if (_isCounterEnabled) {
      setState(() {
        _counter += _incrementValue.toInt();
      });
    }
  }

  String _formatCounter(int counter) {
    switch (_displayFormat) {
      case '十进制':
        return '$counter';
      case '二进制':
        return counter.toRadixString(2);
      case '十六进制':
        return '0x${counter.toRadixString(16).toUpperCase()}';
      default:
        return '$counter';
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Container(
          padding: EdgeInsets.symmetric(horizontal: 210, vertical: 20),
          decoration: BoxDecoration(
            color: Colors.lightBlue[100],
            borderRadius: BorderRadius.circular(8),
          ),
          child: Text(widget.title),
        ),
      ),
      body: Column(
        children: [
          // 开关组件
          Switch(
            value: _isCounterEnabled,
            onChanged: (bool value) {
              setState(() {
                _isCounterEnabled = value;
              });
            },
            activeColor: Colors.green,
            inactiveThumbColor: Colors.grey,
          ),
          // 滑块组件
          Slider(
            value: _incrementValue,
            min: 1.0,
            max: 5.0,
            divisions: 4,
            label: '每次增加 ${_incrementValue.toInt()}',
            onChanged: (double value) {
              setState(() {
                _incrementValue = value;
              });
            },
          ),
          // 下拉菜单组件
          DropdownButton<String>(
            value: _displayFormat,
            items: <String>['十进制', '二进制', '十六进制']
                .map<DropdownMenuItem<String>>((String value) {
              return DropdownMenuItem<String>(
                value: value,
                child: Text(value),
              );
            }).toList(),
            onChanged: (String? value) {
              if (value != null) {
                setState(() {
                  _displayFormat = value;
                });
              }
            },
          ),
          // 原计数器卡片（更新显示格式）
          Card(
            elevation: 8,
            margin: EdgeInsets.all(16),
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(25),
            ),
            child: Padding(
              padding: EdgeInsets.all(16),
              child: Row(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Expanded(
                    child: Container(
                      padding: EdgeInsets.symmetric(horizontal: 6, vertical: 8),
                      decoration: BoxDecoration(
                        color: const Color.fromARGB(255, 210, 146, 167),
                        borderRadius: BorderRadius.circular(8),
                      ),
                      child: Column(
                        mainAxisSize: MainAxisSize.min,
                        crossAxisAlignment: CrossAxisAlignment.center,
                        children: [
                          Text(
                            '已按次数:',
                            style: TextStyle(fontSize: 18, color: Colors.white),
                          ),
                          Text(
                            _formatCounter(_counter),
                            style: TextStyle(
                              fontSize: 35,
                              fontWeight: FontWeight.bold,
                              color: Colors.white,
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                  SizedBox(width: 40),
                  ElevatedButton(
                    onPressed: _incrementCounter,
                    style: ElevatedButton.styleFrom(
                      shape: CircleBorder(),
                      padding: EdgeInsets.symmetric(
                        horizontal: 30,
                        vertical: 60,
                      ),
                      backgroundColor: const Color.fromARGB(255, 202, 140, 161),
                    ),
                    child: Icon(
                      Icons.add,
                      size: 30,
                      color: const Color.fromARGB(255, 255, 255, 255),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}